import React,{Component} from 'react'
import order from './Order.module.css'
import { Select } from 'antd';
import { Button } from 'antd';
import { Input } from 'antd';
import * as api from '../until/getProduct'
const { Option } = Select;
const provinceData = ['河南', '河北','北京'];
const cityData = {
  河北: ['石家庄', '邯郸', '沧州'],
  河南: ['郑州', '登封', '新郑'],
  北京:['北京','朝阳区']
};
export default class Order extends Component{
	constructor(props){
		super(props)
		this.state={
			id:'',
			address2:'',
			addressList:[],
			totalpric:0,
			cities: cityData[provinceData[0]],
			secondCity: cityData[provinceData[0]][0],
			cartList:[],
		}
	}
	  handleProvinceChange = (value) => {
		  console.log(value)
	    this.setState({
			address2:value,
	      cities: cityData[value],
	      secondCity: cityData[value][0],
	    });
	  };
	
	  onSecondCityChange = (value) => {
	    this.setState({
	      secondCity: value,
	    });
		}
		
		
		componentDidMount(){
			window.scrollTo(0,0)
			this.setState({
				totalpric:this.props.location.state.totalpric
			})
			api.getcart({}).then(res=>{
				console.log(res.data)
				let arr=res.data
				arr.map((item,i)=>{
					if(item.product===null){
						arr.splice(i,1)
					}
				})
				this.setState({cartList:arr})
				
				console.log(arr)
			})
			
		}
		order(){
			this.props.history.push({pathname:'/payment',state:{totalpric:this.state.totalpric}})
		}
		add(){
			api.addresses({
				receiver:this.refs.ipt1.value,
				mobile:this.refs.ipt2.value,
				regions:this.state.address2,
				address:this.refs.ipt3.value,
				idDefault:true
			})
			.then(res=>{
				if(res.data.code=='success'){
					this.setState({id:res.data.info._id})
					alert(res.data.message)
				}
				let id=this.state.id
				api.getresses(id).then(res=>{
					console.log(res.data)
					this.setState({addressList:res.data})
				})
			})
		}
	render(){
		const { cities } = this.state;
		return(
			<div>
				<div className={order.Box}>
					<div className={order.top}>
						<img src="https://img2.fiveplus.com/rs/common/v1/web/css/buy_step_2.png?v=20191119142609" alt=''/>
					</div>
					<h3 className={order.h3}>订单确认</h3>
					<div className={order.box}>
						<div className={order.left}>
							<p className={order.address}>确认收货地址</p>
							
							<div className={order.address1}>
							{
									<div onClick={()=>this.xuan()} ref='xuan'>
										<div className={order.box1}>
											<span>姓名:{this.state.addressList.receiver}</span>
										</div>
										<div className={order.box1}>
											<span>电话:{this.state.addressList.mobile}</span>
										</div>
										<div className={order.box1}>
											<span>地址:{this.state.addressList.regions}{this.state.addressList.address}</span>
										</div>
									</div>
							}
							</div>
							<div className={order.ipt}>
								<div>姓名:<input type='text' className={order.input} ref='ipt1'/></div>
								<div>电话:<input type='text'  className={order.input} ref='ipt2'/></div>
								<div>城市:
									<div className={order.city}>
										<Select
										  defaultValue={provinceData[0]}
										  style={{ width: 120 }}
										  onChange={this.handleProvinceChange}
										>
										  {provinceData.map(province => (
											<Option key={province}>{province}</Option>
										  ))}
										</Select>
										<Select
										  style={{ width: 300 }}
										  value={this.state.secondCity}
										  onChange={this.onSecondCityChange}
										  
										>
										  {cities.map(city => (
											<Option key={city}>{city}</Option>
										  ))}
										</Select>
								      </div>
									</div>
								<div>住址:<input type='text'  className={order.input}  ref='ipt3'/></div>
								<p className={order.set}>设置默认地址<input type='checkbox' className={order.check} ref='ipts'/></p>
								<Button type="danger" className={order.button} onClick={()=>this.add()}>添加</Button>
							</div>
							<p className={order.item}>购买商品明细</p>
							<div className={order.bottom}>
							{
								this.state.cartList.map((item)=>{
									return(
									
									<div key={item._id}>
									<table>
										<tbody>
											<tr >
											<td><img src={item.product.coverImg} alt=""/></td>
											<td><p>{item.product.name}</p></td>
											<td><p>{item.quantity}</p></td>
											<td><p>{item.product.price*item.quantity}</p></td>
											</tr>
										</tbody>
									</table>
									</div>
									)
								})
							}
							</div>
						</div>
						<div className={order.right}>
						
							<p className={order.order}>订单汇总</p>
							<p className={order.price}><span>商品总额:</span><b>¥{parseInt(this.state.totalpric)+166}</b></p>
							<p className={order.price}><span>邮费:</span><b>¥16.00</b></p>
							<p className={order.price}><span>优惠金额:</span><b>¥-116.00</b></p>
							<p className={order.jia}><span className={order.cu}>促销</span>FP-优惠价</p>
							<p className={order.jia}><span className={order.cu}>促销</span>FP-满999-100</p>
							<p className={order.jia}><span className={order.cu}>促销</span>线上-全场包邮</p>
							<Input placeholder="输入优惠券" className={order.ipt1}/ >
							<Input placeholder="输入优惠券密码"  className={order.ipt2}/>
							<Button type="danger">使用优惠劵</Button>
							<p className={order.price}><span>实付金额:</span><b>¥{this.state.totalpric}</b></p>
							<Input placeholder="订单备注"  className={order.ipt1}/>
							<Button type="danger" className={order.btn} onClick={()=>this.order()}>提交订单</Button>
						</div>
						
					</div>
				</div>
			</div>
		)
	}
}